<template>
  <div class="bind-phone">
    <div class="phone border por">
      <div class="prev abs-m">+86</div>
      <input class="phone-input gl-input w100 bsb" v-model="phone" placeholder="请输入手机号码"/>
    </div>
    <div class="code border por">
      <input class="code-input gl-input" v-model="code" placeholder="请输入验证码"/>
      <div class="count-down-box abs-m tac" @click="getCode">
        <count-down :value="begin" @ending="begin = false"></count-down>
      </div>
    </div>
    <div class="sure mlr-auto tac" @click="submit">确定</div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex';

  export default {
    name: "BindPhone",
    computed: {
      ...mapGetters(['userInfo'])
    },
    data() {
      return {
        begin: false,
        phone: '',
        phoneReg: /^1\d{10}/,
        code: '',
        codeId: '',
        loading: false,
      }
    },
    methods: {
      getCode(e) {
        let {begin, phone, phoneReg, loading} = this;
        if (loading || begin) return;
        if (!phone) {
          return this.$toast('请输入手机号');
        } else if (!phoneReg.test(phone)) {
          return this.$toast('请输入正确手机号');
        }
        this.loading = true;
        this.http.$post('communication/Api/send', {
          type: 'phone',
          mobile: phone,
          len: 4,
          code_type: 2,
        }).then(res => {
          this.loading = false;
          this.begin = true;
        }).catch(err => {
          this.$err(err);
          this.loading = false;
        });
      },
      submit() {
        let _this = this;
        if (this.loading) return;
        this.loading = true;

        this.http.$post('communication/api/check', {
          type: 'phone',
          mobile: this.phone,
          codes: this.code,
        }).then(res => {
          this.http.$post('webcat/api/bind_phone', {
            uid: this.userInfo.uid,
            phone: this.phone,
          }).then(r => {
            this.util.showPopup({
              type: 'toast',
              content: '绑定成功',
              icon: require('../../images/center/bind_succ_03.png'),
              close() {
                _this.$router.go(-1);
              },
            });
          }).catch(err => {
            this.$err(err);
            this.loading = false;
          });
        }).catch(this.$err);
      },
    },
    created() {
      //
      this.util.checkOpenId();
    },
  }
</script>

<style scoped lang="less">
  .bind-phone {
    color: #333;
    font-size: 1rem;
    line-height: 3.81rem;
  }

  .prev {
    padding-right: .69rem;
    line-height: 1;
    left: 1.25rem;
    border-right: .06rem solid #cfcfcf;
    font-size: .88rem;
    + .phone-input {
      padding-left: 3rem;
    }
  }

  .count-down-box {
    right: .94rem;
    padding: 0 .81rem;
    line-height: 2.06rem;
    background-color: #208fff;
    border-radius: 2.06rem;
    color: #fff;
    font-size: .88rem;
    &:hover {
      background-color: #137df0;
    }
    .count-down {
      vertical-align: top;
    }
  }

  .border {
    padding: 0 .94rem 0 1.25rem;
    border-bottom: .06rem solid #eee;
  }

  .sure {
    margin-top: 3.13rem;
    width: 20.06rem;
    font-size: 1rem;
    color: #fff;
    line-height: 2.81rem;
    background-image: linear-gradient(90deg, #00baff, #3275ff);
    border-radius: .31rem;
    &:hover {
      background-image: linear-gradient(90deg, #00a0dc, #1762f9);
    }
  }
</style>
